<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>领料单</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all" />
    <script type="text/javascript" src="/static/plugin/jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="/static/plugin/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/base.js"></script>
</head>

<body class="layui-anim layui-anim-up">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a>
          <cite>领料单</cite>
        </a>
      </span>
</div>
<div class="x-body">
    <div class="layui-row" style="margin-bottom: 18px">
        <div class="layui-form">
            <div class="layui-input-inline">

                <div class="layui-input-inline" style="width: 150px">
                    <input class="layui-input" id="keyword01" placeholder="请输入产品名称" style="width: 150px">
                </div>
                <button class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>
            </div>
        </div>
    </div>
    <xblock>
        <button class="layui-btn layui-btn-warm" id="add"><i class="layui-icon layui-icon-add-circle-fine"></i>新增</button>
    </xblock>
    <div id="subDiv2">
        <table class="layui-hide" id="tableList" lay-filter="tableList"></table>
    </div>
</div>


<div id="addDivID" hidden="hidden">
    <form class="layui-form" id="addFormID" style="margin-top:20px" >
        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="indexId" class="layui-form-label">
                    <span class="x-red">*</span>填写时间
                    <input type="hidden" value="0" id="indexId">
                </label>
                <div class="layui-input-inline" style = "width:260px;">
                    <input type="text" th:value="${System}"  name="plNumber" lay-verify="realName"  autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-inline">
                <label for="remark1" class="layui-form-label">
                    <span class="x-red">*</span>出库位置
                </label>
                <div class="layui-input-inline" style = "width:260px;">
                    <select lay-filter="required" name="remark1" id="remark1">
                        <option value="PT">喷涂线</option>
                        <option value="DZ">备货区</option>
                        <option value="CPK">成品库</option>
                        <option value="CP">成品链</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item" id="row01">
            <label class="layui-form-label">
                <span class="x-red">*</span><span>产品名称</span>
            </label>
            <div class="layui-input-inline"  style = "width:260px;">
                <select lay-filter="required" name="maIds" id="maId01">
                    <option value='-1'>请选择产品名称</option>
                    <option th:each="material:${materialList}"  th:value="${material.maId}" th:text="${material.maName}"></option>
                </select>
            </div>

            <div class="layui-inline">
                <label for="quantity" class="layui-form-label" style="padding-left: 15px;width: 95px">
                    <span class="x-red">*</span>产品数量
                </label>
                <div class="layui-input-inline"  style = "width:260px;">
                    <input type="number" id="quantity" name="quantity" lay-verify="number"  class="layui-input">
                </div>

                <label for="quantity" class="layui-form-label">
                    <img src="/static/images/jia.png" id="addRow" height="40px" width="40px">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="subBtn" lay-submit lay-filter="addForm">立即提交</button>
                <button  class="layui-btn layui-btn-primary">取消</button>
            </div>
        </div>
    </form>
</div>
<script type="text/html" id="toolBar">
    <!--    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit">编辑</a>-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 打印表单框 -->
<script type="text/javascript">
    var table;
    var customerId2;
    var receiveNumber2;
    function createTime(v){
        var date = new Date(v);
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        m = m<10?'0'+m:m;
        var d = date.getDate();
        d = d<10?("0"+d):d;
        var h = date.getHours();
        h = h<10?("0"+h):h;
        var M = date.getMinutes();
        M = M<10?("0"+M):M;
        var str = y+"-"+m+"-"+d+" "+h+":"+M;
        return str;
    }
    layui.use(['table','layer','upload','form','laydate'], function() {
        table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#testTime', //指定元素
            value:new Date()
        });

        var $ = layui.jquery, active = {
            reload: function () {
                var keyword01 = $.trim($("#keyword01").val());
                table.reload('contenttable', {
                    method: 'get',
                    where: {
                        maName: keyword01
                    }
                    , page: {
                        //重新从第 1 页开始
                        curr: 1
                    }
                });
            }
        };

        //点击行checkbox选中
        $(document).on("click", ".layui-table-body table.layui-table tbody tr", function () {
            var index = $(this).attr('data-index');
            var tableBox = $(this).parents('.layui-table-box');
            //存在固定列
            if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
                tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
            } else {
                tableDiv = tableBox.find(".layui-table-body.layui-table-main");
            }
            var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
            if (checkCell.length > 0) {
                checkCell.click();
            }
        });

        $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
            e.stopPropagation();
        });

        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $("#selectState").val(0);
        form.render();

        table.render({
            elem: '#tableList'
            , url: '/reportPicking/queryReportPickingPage'
            , title: 'machineList'
            , id: 'contenttable'
            , limits: [10, 20, 30]
            , cols: [
                [ //表头
                    {field: 'uid', title: '序号', width: 60, type: 'numbers', align: 'center'}
                    , {field: 'piNumber', title: '清单编号'}
                    , {field: 'maNumber', title: '图号'}
                    , {field: 'maName', title: '产品名称'}
                    , {field: 'quantity', title: '产品数量'}
                    , {field: 'remark', title: '位置'}
                    , {field: 'realName', title: '领料人'}
                    , {
                    field: 'createDate', title: '创建时间', width: '20%', templet: function (row) {
                        return createTime(row.createDate);
                    }}
                    ,{field: 'remark', title: '操作', toolbar: "#toolBar",align:'center'}
                ]
            ]
            , page: true
            , done: function (res, curr, count) {
                $('th').css({
                    'background-color': '#009688', 'color': '#fff', 'font-weight': 'bold'
                });
            }
        });


        table.render({
            elem: '#productAddTable'
            , defaultToolbar: ['filter', 'print']
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: '序号', width: 50, type: 'numbers', align: 'center'},
                    {field: 'mid', title: '物料id', align: 'center', hide: true},
                    {field: 'customer', title: '供应商', align: 'center'},
                    {field: 'productNumber', title: '图号', align: 'center'},
                    {field: 'num', title: '发货数量', edit: 'text', align: 'center'},
                    {field: 'num', title: '收货数量', edit: 'text', align: 'center'},
                    {field: 'asks', title: '喷涂要求', edit: 'text', align: 'center'},
                    {field: 'times', title: '时间', edit: 'text', align: 'center'},
                    {field: 'level', title: '紧急程度', edit: 'text', align: 'center'}

                ]
            ]
            , limit: Number.MAX_VALUE
            , page: false
            , height: 400
            , done: function () {
                $('th').css({
                    'background-color': '#009688', 'color': '#fff', 'font-weight': 'bold'
                })
            }
        });

        //监听行工具事件
        table.on('tool(tableList)', function(obj){
            var data = obj.data;
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            //单个删除
            if(obj.event === 'del'){
                layer.confirm('确定删除吗？', function(index){
                    del(data.picId);
                    layer.close(index);
                });
            }
        });



        $('#addRow').click(function() {
            var indexId = $('#indexId').val();
            var html = '<div class="layui-form-item" id="del'+indexId+'">\n' +
                '            <label class="layui-form-label">\n' +
                '                <span class="x-red">*</span><span>产品名称</span>\n' +
                '            </label>\n' +
                '            <div class="layui-input-inline"  style = "width:260px;">\n' +
                '                <select  lay-verify="required" name="maIds" id="indexNumber'+indexId+'"></select>\n' +
                '            </div>\n' +
                '            <div class="layui-inline">\n' +
                '                <label for="quantity" class="layui-form-label" style="padding-left: 15px;width: 95px">\n' +
                '                    <span class="x-red">*</span>产品数量\n' +
                '                </label>\n' +
                '                <div class="layui-input-inline"  style = "width:260px;">\n' +
                '                    <input type="number"  name="quantity" lay-verify="number"  class="layui-input">\n' +
                '                </div>\n' +
                '                <label for="quantity" class="layui-form-label">' +
                '                <img src="/static/images/jian.png" onclick="delRow('+indexId+')" height="30px" width="30px">' +
                '               </label>' +
                '            </div>\n' +
                '        </div>';

            $('#row01').append(function (index,row) {
                $('#indexId').val(parseInt(indexId)+1);
                return html;
            });
            var option = "<option value='-1'>请选择产品名称</option>";//初始化option的选项
            $.ajax({
                type:'get',
                url:'/stayContainerStare/queryMaterialList',
                async:false,
                success:function (result) {
                    for(var i=0;i<result.length;i++){
                        option +="<option value='"+result[i]['maId']+"'>"+result[i]['maName']+"</option>";//拼接option中的内容
                        $("#indexNumber"+indexId).html(option);//将option的拼接内容加入select中，注意选择器是select的ID
                    }
                    form.render('select');//重点：重新渲染select
                }
            });
            form.render();
        });


        window.delRow = function (indexIds){
            $('#del'+indexIds).remove();
        }

        function del(picId) {
            $.ajax({
                type: 'get',
                url: '/reportPicking/delReportPicking/'+picId,
                success: function (data) {
                    if (data > 0) {
                        layer.msg('删除成功',{icon: 1})
                    }else {
                        layer.msg("请联系管理员！", {icon: 2});
                    }
                    setTimeout(function(){
                        window.location.reload()
                    },1000);
                }
            })
        }

        //增加
        $("#add").click(function(){
            layer.open({
                type: 1 					//Page层类型
                ,area: ['940px', '530px'] 	//宽  高
                ,title: '新增'
                ,shade: 0.6 				//遮罩透明度
                ,maxmin: true 				//允许全屏最小化
                ,anim: 1 					//0-6的动画形式，-1不开启
                ,content: $('#addDivID')
                ,success: function(){
                    form.render();
                }
            });
        });

        form.on('submit(addForm)', function () {
            var maIdList = [];
            var maId01 = $('#maId01').val();
            if (maId01 == -1) {
                layer.msg('请选择产品名称',{icon:5})
                return false;
            }else {
                maIdList.push(maId01);
            }

            var indexId =  $('#indexId').val();
            for (var i = 0; i <= indexId; i++){
                var maId =  $('#indexNumber'+[i]).val();
                if (maId == -1) {
                    layer.msg('请选择产品名称',{icon:5})
                    return false;
                }else {
                    maIdList.push(maId);
                }
            }


            //判断提交的物料是否为空
            if (maIdList.length == 0) {
                return false;
            }

            function mm(a) {
                return /(\x0f[^\x0f]+)\x0f[\s\S]*\1/.test("\x0f" + a.join("\x0f\x0f") + "\x0f");
            }

            var nary = maIdList.sort();
            for(var i = 0; i < nary.length - 1; i++) {
                if(nary[i] == nary[i + 1]) {
                    layer.msg('产品名称重复',{icon:5})
                    return false;
                }
            }


            $("#subBtn").attr("disabled",true);
            $.ajax({
                type:'post',
                url:'/reportPicking/addReportPickingManual',
                data:$('#addFormID').serialize(),
                cache:false,
            }).done(
                function(res) {
                    if (res) {
                        layer.msg('新增成功',{icon:6})
                        setTimeout(function(){
                            location.reload();
                        },1000);
                    }
                }
            ).fail(
                function() {
                    layer.msg('新增失败',{icon:5})
                    setTimeout(function(){
                        location.reload();
                    },1000);
                }
            )
            return false;
        })
    })
</script>
</body>
</html>
